<template>
  <div class="goods banxin">
    <!-- 面包屑 -->   
    <ul class="bread">
        <li @click="$router.push('/')" :class="{'active': $route.path === '/home' || $route.path === '/'}">首页 <i>/</i> </li>
       <li class="active">全部商品</li>
    </ul>

    <img src="../assets/images/products/banner.png" alt="" />
    <section class="list">
      <div>
        <strong>排序 ：</strong>
        <span
          v-for="(item, index) in paixuArr"
          :key="index"
          :class="{ active: paixuActive == index }"
          @click="changePaixu(item.min, item.max, index)"
        >
          {{ item.txt }}
        </span>
      </div>
      <div>
        <strong>分类 ：</strong>
        <span
          v-for="(item, index) in fenleiArr"
          :key="index"
          :class="{ active: fenleiActive == index }"
          @click="changeFenlei(item.value, index)"
        >
          {{ item.txt }}
        </span>
      </div>
    </section>
    <!-- 瀑布流效果
      内容分发（slot插槽）
      每一次渲染不同的内容到同一个组件去渲染

      bigarr 代表原数组（大数组）
      samllarr 代表处理过后分发出来的数组（小数组）
      size 代表每次滚动时显示多少项
     -->

     
    <!-- <Products :arr="this.goodsArr" /> -->
    <LoadMore :bigarr="goodsArr" :size="8">
      <Products slot-scope="scope" :arr="scope.samllarr" />
    </LoadMore>
  </div>
</template>

<script>
import Products from "@/components/Products.vue";
import { GoodsDataApi } from "@/request/api";
import { mapState, mapMutations } from "vuex";
// import Breadcrumb from "@/components/Breadcrumb.vue";

export default {
  data() {
    return {
      // 面包屑数组
      // breadArr: ["首页", "全部商品"],
      paixuActive: 0,
      fenleiActive: 0,
      // 排序的数组
      paixuArr: [
        { txt: "全部", min: 0, max: 10000 },
        { txt: "我能兑换的" },
        { txt: "0-500分", min: 0, max: 500 },
        { txt: "500-1000分", min: 500, max: 1000 },
        { txt: "1000-1500分", min: 1000, max: 1500 },
        { txt: "1500-2500分", min: 1500, max: 2500 },
      ],
      // 分类的数组
      fenleiArr: [
        { txt: "全部", value: 0 },
        { txt: "实物商品", value: 1 },
        { txt: "虚拟商品", value: 2 },
      ],
      //   商品数组
      goodsArr: [],
    };
  },
  components: {
    // Breadcrumb,
    Products,
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        console.log("路由改变");
        // 旧值和新值不一样的时候，页面要刷新
        if(newVal.query.keyword !== oldVal.query.keyword){
          this.$router.go(0);
        }
      },
    },
    deep: true,
  },
  created() {
    // 获取从搜索框过来的keyword
    if(this.$route.query.keyword){
      // console.log(this.$route.query.keyword);
      this.changeGoodsObj({ keyword: this.$route.query.keyword})
    } else {
      this.changeGoodsObj({ keyword: ""})
    }
    this.getGoodsFn();
  },
  computed: {
    ...mapState({
      goodsObj: (state) => state.goods.goodsObj,
    }),
  },
  methods: {
    ...mapMutations({
      changeGoodsObj: "goods/changeGoodsObj",
    }),
    //   点击了排序
    changePaixu(min, max, index) {
      this.changeGoodsObj({ min, max });
      this.paixuActive = index;
      this.getGoodsFn();
    },
    // 点击了分类
    changeFenlei(value, index) {
      this.changeGoodsObj({ type: value });
      this.fenleiActive = index;
      this.getGoodsFn();
    },
    // 发送请求
    getGoodsFn() {
      GoodsDataApi(this.goodsObj).then((res) => {
        if (res.data.code === 0) {
          this.goodsArr = res.data.data;
          // console.log(this.goodsArr);
        }
      });
    },
    // 修改this.goodsObj
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.goods {
  .bread {
    color: #999999;
    display: flex;
    margin-top: 60px;
    margin-bottom: 20px;
    li {
      font-size: 16px;
      cursor: pointer;
      i {
          margin-right: 6px;
      }
      &.active{
          font-weight: bold;
          color: #000;
      }
    }
  }
  .list {
    padding: 40px 0 10px;
    div {
      margin-bottom: 32px;
      strong {
        font-weight: bold;
        color: #000;
        margin-right: 10px;
      }
      span {
        color: #999;
        cursor: pointer;
        margin-right: 30px;
        &.active {
          color: @blue;
          font-weight: bold;
        }
      }
    }
  }
}
</style>